<template>
  <div class="inConbox clearfix det_bg">
    <!-- 头部 -->
    <Nav :URL="urls.url" :text="urls.text"></Nav>
    <!-- 反馈内容 -->
    <section class="User_Opinion_box clearfix">
      <textarea class="input_User_Opinion" name="b" placeholder="您的宝贵意见就，是我们进步的源泉" v-model="textareaS" ></textarea>
      <p class="User_Opinion_Prompt">感谢您的建议,但对于您需要使用该功能进行意见反馈,我司感到十分惭愧,感谢您的建议,我们会努力变的更强大,珍惜您的每一次反馈！</p>
      <button class="user_Opinion_btn bdr" @click="btnPostOpiniion()">提交</button>
    </section>
    <!-- 反馈成功 -->
    <div class="Opinion_seccess" v-show="this.ifisOpinion">
      <div class="Opinion_secc_box tftra bdr dipW ju_al">
        <span class="Opinion_secc_img">
          <img src="../../../static/images/userifon/user_fankui_.png" alt="">
        </span>
        <span class="OPinion_cor">提交成功!</span>
        <span class="Opinion_btn_retrun" @click="getreturnblok()">确定</span>
      </div>
    </div>
  </div>
</template>
<script>
import Nav from '../mallConent/mallTopNav'
export default {
  data(){
    return{
      urls:{
        url:'/bomNav/userContent',
        text:'意见反馈',
      },
      textareaS:'', // 意见反馈
      ifisOpinion:false, // 反馈成功
    }
  }
  ,methods:{
    btnPostOpiniion(){
      if(this.textareaS != ""){         
        this.$store.dispatch('showloader')                 
         this.axios.post(this.$busPoat.user(),{"content":this.textareaS}).then(response=>{ 
            var st;
            clearTimeout(st)
            st = setTimeout(() =>{
              if(response != null || response != undefined){
                this.$store.dispatch('hideloader')
                if(response.data.iplancode == 200){
                  this.ifisOpinion = true;                                  
                  this.textareaS = ''
                }else if(response.data.iplancode == 101){
                  alert('亲，你的反馈次数已用完，如果您还有什么意见，请24小时后在反应')
                  this.$router.replace({
                    path:'/bomNav/userContent'
                  })
                }
              }else{
                this.$store.dispatch('hideloader')
                alert('请求加载过慢...')
              }
              clearTimeout(st)                                                                       
            },2000)
          }).catch(error=>{
            this.$store.dispatch('hideloader')
            alert('反馈发送失败')
          })
      }else{
        alert('请输入反馈的内容')
      }
    },
    getreturnblok(){
      this.$router.replace({
        path:'/bomNav/userContent'
      })
    }
  }
  ,components:{Nav} //引入组件
}
</script>
<style lang="scss" scoped>
.det_bg{
  margin:0rem ;
  z-index: 51;
  height: 100%;
  background: #f2f2f2;
  position: fixed;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
  color: #DEDEDE;
  font-size: .24rem;
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
  color: #DEDEDE;
  font-size: .24rem;
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
  color: #DEDEDE;
  font-size: .24rem;
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
  color: #DEDEDE;
  font-size: .24rem;
} 
.User_Opinion_box{
  padding:0rem .4rem ;
  background:transparent;
  width: 100%;
  position: relative;
  margin-top:1rem;
  .input_User_Opinion{
    background:#fff;
    color: #DEDEDE;
    width: 100%;
    resize: none;
    padding-top: .3rem;
    height: 4.02rem;
    padding-left: .4rem;
  }
  .User_Opinion_Prompt{
    font-family: Microsoft YaHei;
    font-size: .2rem;
    color:#999;
    width: 100%;
    text-align: justify; 
    padding:.2rem 0rem;
    line-height: .35rem;
    letter-spacing: .02rem;
  }
  .user_Opinion_btn{
    width: 100%;
    height: 1rem;
    background:#FF7200 ;
    color:#ffe5e5;
    font-size: .3rem;
    text-align: center;
    line-height: 1rem;
  }
}
.Opinion_seccess{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
  z-index: 53;
  top:0;
  left:0;
  .Opinion_secc_box{
    padding-top:.65rem;
    position: relative;
    height: 4.8rem;
    width: 5.4rem;
    top:50%;
    left:50%;
    background: #fff;
    .Opinion_secc_img{
      width: 1.6rem;
      height: 1.6rem;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .OPinion_cor{
      width: 100%;
      text-align: center;
      color:#FF7200;
      font-size: .32rem;
      margin:.55rem 0rem;
      font-weight: 600;
    }
    .Opinion_btn_retrun{
      width: 2rem;
      height: 0.64rem;
      text-align: center;
      line-height: .60rem;
      background-image:url("../../../static/images/userifon/Opinion_btn_03.png");
      background-repeat:no-repeat;
      background-size:100%;
      font-size:.3rem;
      color:#fff;
    }
  }
}
</style>
